@white: #f9f9f9;
@neu-2: #d1d9e6;
@gray: rgb(199, 199, 199);
@light_gray: #efefef;
@text_gray: #505050;
@blue: #557ffc;

.VVCwindow {
  margin-top: 10px;
  position: fixed;
  top: 5vh;
  left: 50vw;
  z-index: 100;
  overflow: hidden;
  border-radius: 15px;

  & .VVCsubassembly {
    padding: 10px;
    background-color: @white;
    border-radius: 15px;
    box-shadow: inset 0 0 3px @gray;
    position: relative;
    display: flex;
    flex-direction: row;

    & * {
      margin: 0 5px;
    }

    & img:first-child {
      width: 50px;
      border-radius: 50%;
      box-shadow: 0 0 5px @gray;
    }

    & p {
      transform: translateY(14px);
    }

    & img:nth-child(3),
    & img:nth-child(4) {
      cursor: pointer;
    }

    & img:nth-child(3):active,
    & img:nth-child(4):active {
      transform: translate(1px, 1px);
    }
  }

  & #appear {
    bottom: 0;
    animation: VVCanimationappear .5s 1;
  }

  & #hide {
    bottom: 75px;
    animation: VVCanimationdisappear .5s 1;
  }
}

// 动画
@keyframes VVCanimationappear {
  from {
    bottom: 75px;
  }
  to {
    bottom: 0;
  }
}

@keyframes VVCanimationdisappear {
  from {
    bottom: 0;
  }
  to {
    bottom: 75px;
  }
}